<template>
  <div class="intercept-list">
    <div class="left">
      <common-Form
          :fieldsList="aaaField"
          :hideTable="false"
          :table-head="firstTableHead"
          :hidePagination="false"
          ref="interceptRef"
          :defaultData="defaultData"
          :tableHeight="1000"
          :pageSize="25"
          :tableUrl="'/list/intercept_list'"
          @gotTheData="gotTheData"
      >
        <template v-slot:edit="scope" >
          <div>
          <span class="table-btn" style="color: #3DE11D;font-size: 50px"
                @click="detail(scope.scope.$index, scope.scope.row)"><i class="el-icon-edit-outline">反馈</i></span>
          </div>
        </template>
        <template v-slot:formBtn>
          <div style="text-align: right;width: 100%;">
            <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
            <el-button
              type="primary"
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
            >导入</el-button>

          </div>
        </template>

      </common-Form>

    </div>
    <div class="right">
      <div class="echarts-item">
        <div class="echarts-content" id="barCharts"></div>
      </div>
      <div class="echarts-item">
        <div class="echarts-content" id="pieCharts"></div>
      </div>
    </div>
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Api from "@/api/index.api";
import commonForm from '@/components/commonForm/commonForm.component'

import _ from "lodash";
import * as request from '@/utils/request/request'

export default {
  name: 'dataManage',
  components: {
    commonForm
  },
  data () {
      return {
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "导入",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          /*  headers: { Authorization: "Bearer " + getToken() },*/
          // 上传的地址
          url: request.baseURL + "/list/importInterceptUrlLog"
        },
        pieChart: null,
        barChart: null,
        exportDate: [],
        aaaField: [
          {
            type: 'text',
            code:'keyWord'
          },

        ],
        firstTableHead: [
          {
            prop: 'url',
            label: 'url'
          },
          {
            prop: 'fraud_type',
            label: '涉诈类型'
          },
          {
            prop: 'intercept_count',
            label: '拦截量'
          },
          {
            prop: 'date',
            label: '日期'
          },
          // {
          //   prop: 'edit',
          //   label: '操作'
          // },
        ],
        defaultData: [
          {
            'url': 'https://kxnhf.mm51-l1346.cc:8888/',
            'fraud_type': '网络婚恋、交友类（非杀猪盘类）',
            'intercept_count': '97',
            'date': '2025-06-01',
          },
          {
            'url': 'https://flvv.avtaohua-l1292.vip/',
            'fraud_type': '网络婚恋、交友类（非杀猪盘类）',
            'intercept_count': '84',
            'date': '2025-05-31',
          },
          {
            'url': 'https://51.44.97.132/',
            'fraud_type': '虚假理财类',
            'intercept_count': '17',
            'date': '2025-05-30',
          },
          {
            'url': 'https://www.wushu88.com/',
            'fraud_type': '虚假理财类',
            'intercept_count': '17',
            'date': '2025-05-29',
          },
          {
            'url': 'https://p40hb.drzt5p2q.top/',
            'fraud_type': '虚假理财类',
            'intercept_count': '64',
            'date': '2025-05-28',
          },
          {
            'url': 'https://6nc1q.4006.xyz/',
            'fraud_type': '虚假理财类',
            'intercept_count': '17',
            'date': '2025-05-27',
          },
          {
            'url': 'https://mklf.ergou168.homes/',
            'fraud_type': '虚假理财类',
            'intercept_count': '97',
            'date': '2025-05-26',
          },
          {
            'url': 'https://yuteg.mm51-l1347.cc:8888/',
            'fraud_type': '虚假理财类',
            'intercept_count': '58',
            'date': '2025-05-25',
          },
          {
            'url': 'https://i.69260.mobi/',
            'fraud_type': '虚假理财类',
            'intercept_count': '38',
            'date': '2025-05-24',
          },
          {
            'url': 'https://2.semiao1066.cc/',
            'fraud_type': '虚假理财类',
            'intercept_count': '43',
            'date': '2025-05-23',
          },
        ]
      }
  },
  mounted() {
  },
  methods: {
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("导入成功");
      this.$refs.interceptRef.getTableData()
    },
    submitFileForm () {
      this.$refs.upload.submit();

    },
    handleImport () {
      this.upload.open = true
    },
    gotTheData () {
      this.initBarCharts();
      this.initPieCharts();
    },
    initPieCharts () {
      this.pieChart = this.$echarts.init(document.getElementById('pieCharts'));
      const isScreen1920 = window.innerWidth <= 1920;

      // Group data by fraud_type and sum intercept_counts
      const fraudTypeMap = {};
      this.defaultData.forEach(item => {
        const type = item.fraud_type;
        const count = parseInt(item.intercept_count);
        if (!fraudTypeMap[type]) {
          fraudTypeMap[type] = 0;
        }
        fraudTypeMap[type] += count;
      });

      const pieData = Object.keys(fraudTypeMap).map(type => ({
        value: fraudTypeMap[type],
        name: type
      })).sort((a, b) => b.value - a.value); // Sort descending by value

      const option = {
        // backgroundColor: '#2c343c',
        title: {
          text: '类型占比',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c}次 ({d}%)"
        },
        visualMap: {
          show: false,
          min: Math.min(...pieData.map(item => item.value)),
          max: Math.max(...pieData.map(item => item.value)),
          inRange: {}
        },
        series: [{
          name: '诈骗类型',
          type: 'pie',
          radius: '50%',
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          color: ['rgba(131,249,103, .9)', 'rgba(251, 254, 39, 0.8)', 'rgba(254, 80, 80, 0.9)', 'rgba(29, 183, 229, 0.9)'],
          data: pieData,
          roseType: 'radius',
          label: {
            position:'outer',
            alignTo:'edge',
            // margin:50,

            formatter: ['{c|{c}次}', '{b|{b}}'].join('\n\n\n'),
            rich: {
              c: {
                color: 'rgb(241,246,104)',
                fontSize: isScreen1920 ? 20 : 45,
                fontWeight: 'bold',
                lineHeight: 5
              },
              b: {
                color: 'rgb(98,137,169)',
                fontSize: isScreen1920 ? 15 : 40,
                height: 40
              },
            },
          },
          labelLine: {
            lineStyle: {
              color: 'rgb(98,137,169)',
            },
            smooth: 0.2,
            length: 10,
            length2: 20,
          },
          itemStyle: {
            shadowColor: 'rgba(0, 0, 0, 0.8)',
            shadowBlur: 50,
          }
        }]
      };

      this.pieChart.setOption(option);

    },
    initBarCharts() {
      // Initialize chart with the container
      this.barChart = this.$echarts.init(document.getElementById('barCharts'));

      // Prepare data from defaultData
      const dates = this.defaultData.map(item => item.date);
      const interceptCounts = this.defaultData.map(item => parseInt(item.intercept_count));
      const fraudTypes = [...new Set(this.defaultData.map(item => item.fraud_type))];

      // Set chart options
      const option = {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          data: fraudTypes,
          left: '7%',
          top: '5%',
          textStyle: {
            color: "#fff"
          },
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 25
        },
        xAxis: {
          type: 'category',
          data: dates,
          axisLine: {
            lineStyle: {
              color: '#cdd5e2'
            }
          },
          axisLabel: {
            textStyle: {
              color: "#fff"
            }
          },
        },
        yAxis: [{
          type: 'value',
          // axisLine: {
          //   show: false,
          //   lineStyle: {
          //     color: '#cdd5e2'
          //   }
          // },
          // axisLine: {
          //   show: false,
          //   lineStyle: {
          //     color: '#cdd5e2'
          //   }
          // },
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#fff"
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
        }],
        series: [{
          name: '拦截量',
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#29acff'
            }, {
              offset: 1,
              color: '#4bdfff'
            }]),
            borderRadius: 6,
          },
          data: interceptCounts
        }]
      };

      // Apply the configuration
      this.barChart.setOption(option);
    },

    detail(e, row){
      this.$refs.DataCheck.title= '查看详情'
      //this.$refs.DataCheck.getTabDate(row)
      this.$refs.DataCheck.tableData= row
      this.$refs.DataCheck.dialogFormVisible= true

    },
     handleQuery() {
       let params = _.clone(this.$refs.interceptRef.form)
       this.$refs.interceptRef.getTableData(params)
    },
  },
}
</script>
<style lang="stylus">
  .intercept-list{
    box-sizing: border-box;
    padding: 10px;
    height: 100%;
    pointer-events: auto;
    display: flex;
    gap: 10px;
    .left, .right {
      height: 100%;
    }
    .left {
      width: 60%;
    }
    .right {
      width: 40%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      .echarts-item {
        height: 50%;
        .echarts-content {
          height: 100%
        }
      }
    }
  }

</style>
